<template>
  <div class="myswiper">
    <div class="swiper">
      <swiper class="swiper-wrapper" :options="swiperOption">
        <div
          class="swiper-slide"
          v-for="(item, index) in hotItems"
          :key="index"
        >
          <div class="hotItem">
            <div class="hotItem-title">
              <img src="../static/douhao.png" alt="" />
              <p>
                {{ item.name }}
              </p>
            </div>
            <div class="hotItemMain">
              {{ item.itemMain }}
            </div>
            <div class="product">
              <img :src="item.imgUrl" />
              <router-link
                :to="{
                  path: 'botDetail',
                  query: { id: item.id },
                }"
              >
                <p>相关产品：</p>
                <p>
                  {{ item.product }}
                </p>
              </router-link>
            </div>
          </div>
        </div>
      </swiper>
      <div class="prevNext">
        <div class="swiper-button-prev" slot="button-prev"></div>
        <div class="swiper-button-next" slot="button-next"></div>
      </div>
      <div>
        <div class="swiper-pagination" slot="pagination"></div>
      </div>
    </div>
  </div>
</template>

<script>
import { Swiper, SwiperSlide } from "vue-awesome-swiper";
import "swiper/css/swiper.css";
export default {
  components: {
    Swiper,
    SwiperSlide,
  },

  data() {
    return {
      swiperOption: {
        initialSlide: 1,
        effect: "coverflow",
        slidesPerView: "auto",
        centeredSlides: true,
        loop: false,
        coverflowEffect: {
          rotate: 0,
          stretch: -250,
          depth: 500,
          modifier: 1,
          slideShadows: false,
        },
        pagination: {
          el: ".swiper-pagination",
          clickable: true,
        },
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
          disabledClass: "my-button-disabled",
        },
        autoplay: false,
        on: {},
      },
      hotItems: [
        {
          id: 200003,
          name: "50shou电竞饰品交易平台",
          itemMain:
            "Steam饰品交易机器人帮助50shou电竞饰品交易平台实现24小时自动交易收货，减少人力成本，缩短网站发货时间并提高发货效率",
          imgUrl:
            "https://cdnhdblog.steamrobot.me/FoSuRAKMKyHhwHk6CDLgFGdn97iE?imageView2/2/w/150/h/150",
          product: "Steam饰品机器人-淘宝版",
        },
        {
          id: 200001,
          name: "浩瀚数码专营店",
          itemMain:
            "浩瀚数码专营店主营多平台游戏代购，包含Steam，Origin，Epic，Uplay。使用steam礼物代购机器人，帮助商家实现24小时Steam游戏代购自动发货，大大提供代购效率，降低了人工成本",
          imgUrl:
            "https://cdnhdblog.steamrobot.me/FjXUkCbdVBPHsGjYbIuJWgjaC7cW?imageView2/2/w/150/h/150",
          product: "Steam礼物机器人-淘宝版",
        },
        {
          id: 200002,
          name: "淘宝1568电玩",
          itemMain:
            "淘宝1568电玩主营steam卡图代充，余额交易，钥匙代购，使用steam充值机器人，自动登录买家账号代充，24小时值守，减少客户流失，提高店铺转化率。",
          imgUrl:
            "https://cdnhdblog.steamrobot.me/FlDRU79gW3KGvRQDznR2DWYqPJol?imageView2/2/w/150/h/150",
          product: "Steam礼物机器人-激活码版",
        },
        {
          hotItemId: 10003,
          name: "淘宝1568电玩",
          itemMain:
            "淘宝1568电玩主营steam卡图代充，余额交易，钥匙代购，使用steam充值机器人，自动登录买家账号代充，24小时值守，减少客户流失，提高店铺转化率。",
          imgUrl:
            "https://cdnhdblog.steamrobot.me/FlDRU79gW3KGvRQDznR2DWYqPJol?imageView2/2/w/150/h/150",
          product: "Steam充值机器人-买家版",
        },
      ],
    };
  },
};
</script>

<style lang="less" scoped>
.myswiper {
  margin-top: 90px;
  .swiper {
    .swiper-wrapper {
      height: 385px;
    }
    .swiper-slide {
      width: 400px;
      width: auto;
    }
    .swiper-pagination {
      left: 50%;
      transform: translate(-50%);
    }

    .prevNext {
      position: absolute;
      width: 528px;
      top: 56%;
      left: 335px;
      z-index: 99;
      .swiper-button-next {
        right: 0;
        width: 103px;
        height: 103px;
        background: url(../static/next.png) no-repeat;
        background-size: cover;
        outline: none;
      }
      .swiper-button-prev {
        transform: rotate(180deg);
        left: 0;
        width: 103px;
        height: 103px;
        background: url(../static/next.png) no-repeat;
        background-size: cover;
        outline: none;
      }
      .swiper-button-prev:after,
      .swiper-container-rtl .swiper-button-next:after {
        content: none;
      }
      .swiper-button-next:after,
      .swiper-container-rtl .swiper-button-prev:after {
        content: none;
      }
    }
    .hotItem {
      width: 399px;
      height: 353px;
      background: #eef2f4;
      box-shadow: 0 3px 27px 0 #c4c4c4e3;
      box-sizing: border-box;
      padding: 30px;
      .hotItem-title {
        display: flex;
        align-items: center;
        font-size: 16px;
        font-family: Microsoft YaHei;
        font-weight: 600;
        color: #1767e3;
        width: 100%;
        cursor: pointer;
        img {
          height: 18px;
          margin-right: 20px;
        }
        p {
          white-space: normal;
          overflow: hidden;
        }
      }
      .hotItemMain {
        font-size: 14px;
        width: 300px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #222;
        line-height: 23px;
        margin-left: 53px;
        margin-top: 25px;
      }
      .product {
        display: flex;
        align-items: center;
        margin-top: 40px;
        cursor: pointer;
        img {
          width: 95px;
          height: 95px;
          background: #fff;
          border-radius: 50%;
          margin-left: 50px;
          margin-right: 20px;
        }
        > div {
          font-size: 14px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #222;
          :last-child {
            font-size: 13px;
            margin-top: 10px;
          }
        }
      }
    }
  }
}
</style>

<style>
.swiper-pagination-bullet {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
.swiper-pagination-bullet:not(:last-child) {
  margin-right: 10px;
}
</style>